<template>
  <div class="form-container">
    <el-form @submit.prevent="submitForm" :model="form" label-width="100px" class="custom-form">
      <el-form-item label="用户名:" prop="username">
        <el-input v-model="form.username" required></el-input>
      </el-form-item>
      <el-form-item label="电子邮件:" prop="email">
        <el-input type="email" v-model="form.email" required></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input type="password" v-model="form.password" show-password required></el-input>
      </el-form-item>
      <el-form-item label="个人简介:" prop="bio">
        <el-input type="textarea" v-model="form.bio"></el-input>
      </el-form-item>
      <el-form-item label="头像链接:" prop="image">
        <el-input v-model="form.image"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import axios from 'axios'; // 导入 Axios 库，用于发送 HTTP 请求
import { ref } from 'vue'; // 导入 Vue 3 的 ref 函数，用于创建响应式数据

// 创建一个响应式对象来存储表单数据
const form = ref({
  username: '', // 用户名字段，默认为空字符串
  email: '', // 电子邮件字段，默认为空字符串
  password: '', // 密码字段，默认为空字符串
  bio: '', // 个人简介字段，默认为空字符串
  image: '' // 头像链接字段，默认为空字符串
});

// 定义一个异步函数来处理表单提交
const submitForm = async () => {
  try {
    // 使用 Axios 发送 POST 请求到服务器的 /api/users 端点
    const response = await axios.post('/api/users', {
      username: form.value.username, // 将用户名字段的数据发送到服务器
      email: form.value.email, // 将电子邮件字段的数据发送到服务器
      password: form.value.password, // 将密码字段的数据发送到服务器
      bio: form.value.bio, // 将个人简介字段的数据发送到服务器
      image: form.value.image // 将头像链接字段的数据发送到服务器
    });

    // 注册成功后的处理
    // 这里可以根据实际需求添加更多的处理逻辑，例如重定向到主页或显示成功消息
    console.log("注册成功:", response.data); // 打印服务器返回的成功响应数据
  } catch (error) {
    // 注册失败后的处理
    console.error("注册新用户失败:", error); // 打印错误信息到控制台，以便调试
  }
};
</script>

<style scoped>
/* 添加样式以设置表单宽度和居中 */
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh; /* 如果希望页面垂直居中 */
}

.custom-form {
  width: 500px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
